<script setup lang="ts" name="warning_calculation">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
  computed,
} from "vue";
import {
  ElMessage,
  ElMessageBox,
  ElTable,
  FormInstance,
  FormRules,
  ElForm,
} from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from "echarts";
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import { addDeviceWork,getDeviceWork } from "@/api/server_login";
import { Search, RefreshRight, Plus } from "@element-plus/icons-vue";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { fromPairs, result } from "lodash";
import { val, value } from "dom7";

const router = useRouter();

// input输入框
const input = ref("");
const filterTableData = ref([]);
// 列表重置
interface User {
  date: string;
  name: string;
  tag: string;
  ip: string;
  time: string;
  cpu: string;
}

const tableRef = ref<InstanceType<typeof ElTable>>();

// TODO: improvement typing when refactor table
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  tableRef.value!.clearFilter();
};
const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.ip;
};
const formatter1 = (row: User, column: TableColumnCtx<User>) => {
  return row.time;
};
const formatter2 = (row: User, column: TableColumnCtx<User>) => {
  return row.time;
};
const formatter3 = (row: User, column: TableColumnCtx<User>) => {
  return row.time;
};
const formatter4 = (row: User, column: TableColumnCtx<User>) => {
  return row.time;
};
const filterTag = (value: string, row: User) => {
  return row.tag === value;
};
const filterHandler = (
  value: string,
  row: any,
  column: TableColumnCtx<User>
) => {
  const property = column["property"];
  return row[property] === value;
};




// 列表添加
const form = reactive({
  date: "",
  name: "",
  ip: "",
  time: "0",
  cpu: "0",
  tag: "暂停",
  wendu: "0",
  mb: "1289",
});

const onSubmitDel = () => {
  dialogVisible.value = false;
};

const dialogVisible = ref(false);

// const AlltableData = reactive([])
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();

// 表单验证
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入设备码", trigger: "blur" }],
  ip: [{ required: true, message: "请输入ip", trigger: "blur" }],
});

// 获取设备搜索重置

const search = ref("");

const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};

// 添加时间
const value1 = ref("");

onMounted(() => {
  getList(0);
});


//列表数据
const getList = async (page: number) =>{
  let res = await getDeviceWork({
    page:page || 1,
    pageSize: 20
  });

  console.log('res',res)
  
  const date = res.list

  let arr = {...date}

  if(res.result == "success") {
    filterTableData.value = res.list
  }

}
//添加设备
const onSubmit = async (val:number)=>{
  let res = await addDeviceWork({
    macAddr:form.name,
    ip:form.ip,
    gmtExec:form.date
  })
  if(res.result === "success"){
    ElMessage({
      type:"success",
      message:"保存成功",
    });
    form.name = '',
    form.ip = '',
    form.date = ''
    dialogVisible.value=false
  }
  getList(0)
}
</script>

<template>
  <div class="calculation-box">
    <div class="calculation-box-input">
      <div>搜索设备码：</div>
      <el-input
        class="input"
        v-model="search"
        clearable
        size="default "
        placeholder="请输入要搜索的设备码"
      />
      <!-- <div>请输入IP：</div>
      <el-input class="input" v-model="search" clearable placeholder="输入ip" /> -->

      <!-- 添加按钮 -->
      <el-button
        type="primary"
        class="btn"
        :icon="Plus"
        @click="dialogVisible = true"
        >添加设备</el-button
      >
      <!-- 添加弹窗 -->
      <el-dialog v-model="dialogVisible" title="添加设备" width="30%">
        <el-form
          :model="form"
          label-width="120px"
          ref="ruleFormRef"
          :rules="rules"
          status-icon
        >
          <el-form-item label="输入设备码" prop="name">
            <el-input v-model="form.name" placeholder="请输入设备码" />
          </el-form-item>
          <el-form-item label="输入IP" prop="ip">
            <el-input v-model="form.ip" placeholder="请输入ip" />
          </el-form-item>
          <!-- 选择时间 -->
          <el-form-item label="选择时间" prop="data">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="选择时间"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item label="运行时间" prop="tag">
            <el-input v-model="form.tag" placeholder="请输入ip" disabled />
          </el-form-item>
          <el-form-item label="GPU使用率" prop="cpu">
            <el-input v-model="form.cpu" placeholder="请输入ip" disabled />
          </el-form-item>
          <el-form-item label="GPU温度" prop="cpu">
            <el-input v-model="form.cpu" placeholder="请输入ip" disabled />
          </el-form-item>
          <el-form-item label="硬盘空间" prop="cpu">
            <el-input v-model="form.cpu" placeholder="请输入ip" disabled />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit"
              >确定</el-button
            >
            <el-button @click="onSubmitDel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 搜索 -->
      <!-- <el-button type="success" :icon="Search" >搜索</el-button> -->
      <!-- 重置 -->
      <!-- <el-button type="warning" :icon="RefreshRight">重置</el-button> -->
    </div>
    <div class="calculation-box-table">
      <el-button @click="clearFilter">重置运行状态</el-button>
      <el-table
        ref="tableRef"
        row-key="date"
        :data="filterTableData"
      >
        <el-table-column prop="gmt_create" label="日期" />
        <el-table-column prop="mac_addr" label="设备码" />
        <el-table-column prop="ip" label="IP" />
        <el-table-column prop="gmt_exec" label="运行时间/h"/>
        <el-table-column prop="gpu_rate" label="gpu使用率/%" />
        <el-table-column prop="cpu_temperature" label="gpu温度"/>
        <el-table-column prop="hard_disk_space" label="硬盘剩余空间/MB"/>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <span v-if="scope.row.status == 'success'" style="color: #eead0e"
              >正常</span
            >
            <span v-if="scope.row.status == 'normal'" style="color: #8968cd"
              >暂停</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.calculation-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #0b0b0b;
  color: rgb(136, 136, 136);

  .calculation-box-input {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20px;

    // 弹窗
    .btn {
      margin-right: 12px;
    }

    .input {
      width: 20%;
      margin-right: 30px;
    }
  }
}
</style>
